create-react-app新建application目錄結構
react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
public/index.html為頁面模版，根節點為root到時會把組件透過ReactDOM.render描繪致此。public下的文件才能夠被public/index.html所使用，除非把src/下build成檔案使用。
public/index.html
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
src/index.js為JavaScritp entry point，需要將js與css放在src目錄下，只有src目錄中的文件才會被webpack處理。import src/App.js module名App，使用ReactDOM.render()把App描繪到Public/index.html的root節點上。
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
JSX注意事項
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
以往在HTML會把一組css屬性定義為class使用，因為在JavaScript中class為關鍵字，JSX裡無法直接使用。React DOM屬性使用駝峰式命名，所以JSX裡轉換為className，因為React到時會把自定義轉換為HTML屬性。
HTML
<div class="App">
JSX
<div className="App">
iThome鐵人賽
看影片追技術